<template>
	<div id="">
		<mt-swipe :auto="4000">
  		<mt-swipe-item v-for="(item,index) in lunbolist" :key="item.src"><img v-bind:src="item.src"/></mt-swipe-item>
		</mt-swipe>
		<!--九宫格-->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../static/imges/nav1.png"/>
		                    <div class="mui-media-body">新闻资讯</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		            		<img src="../../static/imges/nav2.png"/>
		                    <div class="mui-media-body">图片分享</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../static/imges/nav3.png"/>
		                    <div class="mui-media-body">商品购买</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../static/imges/nav4.png"/>
		                    <div class="mui-media-body">留言反馈</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../static/imges/nav5.png"/>
		                    <div class="mui-media-body">视频专区</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../static/imges/nav6.png"/>
		                    <div class="mui-media-body">联系我们</div></a></li>
		</ul> 
		
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	export default{
		data(){
			return{
				lunbolist:[]
			}
		},
		created(){
			this.getlubotu();
		},
		methods:{
			getlubotu(){//获取轮播图数据的方法
				this.$http.get("http://localhost:3000/pictures").then(res=>{
					if(res.status===200){
						//请求成功后的
						this.lunbolist=res.body
//						Toast('加载轮播图ok')
					}else{
						//请求失败后的
						Toast('加载轮播图失败')
					}
//					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.mint-swipe{
		height:200px;
		
		.mint-swipe-item{
			img{
				width: 100%;
			}
	}
	
	}
	.mui-grid-view.mui-grid-9{
		background: #FFFFFF;
		li{
			border: 0;
		}
		img{
			width:60px;
		}
		.mui-media-body{
			font-size: 13px;
		}
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell{
		border: 0;
	}
	
	
</style>